<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
</head>

<body>
  <header>
    <h1>力导向图</h1>
  </header>
  <main class="container">
    <h2>力导向图</h2>
    <section style="height: 100vh;">
      <div id="forceRelationship" style="height:inherit;width: 100%;"></div>
    </section>
  </main>

  <script type="module">
    import ForceRelationship from './charts/ForceRelationship.js'

    d3.json('./data/forceRelationship.json').then(data => {


     new ForceRelationship('forceRelationship', data)
        .setSizeKey('size')
        .setColorKey('group')
        .setNameKey('name')
        .setTextColor('#212121')
        .setLineColor("rgb(50,50,50)")
        .setLinksMarker(true)
        .onClickNode((e,d,targets,sources)=>{
          /**
           * 参数1：事件对象
           * 参数2：点击的结点的数据
           * 我想搞个参数3：得到该节点的links，代表它连向谁
           * 我想搞个参数4：得到该节点的links，代表谁连向它
           */
          console.log(e,d,targets,sources);
          //通过targets,sources，就可以调用别的图表的render，直接绘图了。。。。
          例如wordcloud.render(sources)
        })
        .init()
        .render();
    })
  </script>

</body>

</html>